<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 400px;
			height: 340px;
			margin: 0 auto;
			background: skyblue;
			border-radius: 10px;
			box-shadow: 0 4px #7f98a9;
		}
		li{
			list-style: none;
			width: 100%;
		}
		.son{
			background: pink;
			width: 80px;
			height: 50px;
			font-size: 50px;
			text-align: center;
			color: #fff;
			line-height: 50px;
			float: left;
			margin: 20px 0 0 20px;
			border-radius: 8px;
			box-shadow: 0 4px #DD7797;
		}
		.box input{
			float: right;
			width: 240px;
			height: 45px;
			margin-top: 20px;
			margin-right: 20px;
			background: #8ca5b7;
			padding-left: 10px;
		}
		.clearfix::after{
			content: '';
			height: 0;
			clear: both;
			visibility: hidden;
			display: block;
		}
		.son1{
			width: 80px;
			height: 50px;
			float: left;
			margin-left: 10px;
			background: #fff;
			text-align: center;
			border-radius: 10px;
			line-height: 50px;
			box-shadow: 0px 5px #7f98a9;
			margin-top: 12px;
		}
		.son2{
			margin-left: 20px;
		}
		.son3{
			background: #f0d0f9;
		}
		.son4{
			background: #f0d05f;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li class="clearfix">
				<div class="son">c</div>
				<input type="text" name="">
			</li>
			<li>
				<div class="son1 son2">7</div>
				<div class="son1">8</div>
				<div class="son1">9</div>
				<div class="son1 son3">+</div>
				<div class="son1 son2">4</div>
				<div class="son1">5</div>
				<div class="son1">6</div>
				<div class="son1 son3">-</div>
				<div class="son1 son2">3</div>
				<div class="son1">2</div>
				<div class="son1">1</div>
				<div class="son1 son3">*</div>
				<div class="son1 son2">0</div>
				<div class="son1">.</div>
				<div class="son1 son4">=</div>
				<div class="son1 son3">/</div>
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		// 
		let div = document.querySelectorAll(".box div")
		let screen = document.querySelector('input')

		for(let i = 0; i < div.length; i++){
			div[i].onclick = function(){
				let screenVal = screen.value
				let divVal = this.innerText
				if (divVal == 'c') {
					screen.value = ''
				}else if(divVal == '='){
					screen.value = eval(screen.value)
				}else{
					screen.value = screenVal + divVal
				}
			}
		}
	</script>
</body>
</html>